<!doctype html lang="pt-br">
<html>

    <head>
        <meta charset="utf-8"/>
        <title>Moto Certo</title>
        <base href="{base_url}{base_template_site}">
        <!--[if lt IE 9]>
                <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <link rel="stylesheet" media="all" href="css/resset.css"/>
        <link rel="stylesheet" media="all" href="css/geral.css"/>
        <link rel="stylesheet" media="all" href="css/anunciar.css"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <!-- Mobile Safari maximum-scale=1 to fixe the bug auto-zoom bug: http://filamentgroup.com/examples/iosScaleBug/ -->
        <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
        <script src="js/jquery.maskedinput-1.3.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("select[name=marcas]").change(function(){
                    var marca = $(this).val();
                    if ( marca === '')
                        return false;
                    resetaCombo('modelo');
                    resetaCombo('ano_fabricacao');
                    resetaCombo('ano_modelo');
                    $.getJSON('{base_url}moto/modelo/' + marca, function (data){
                        var option = new Array();
                        $.each(data, function(i, obj){
                            option[i] = document.createElement('option');
                            $( option[i] ).attr( {value : obj.id} );
                            $( option[i] ).attr( {cilindrada : obj.cilindrada} );
                            $( option[i] ).append( obj.nome );
                            $("select[name='modelo']").append( option[i] );
                        });
                    });
                });
                
                $("select[name=modelo]").change(function(){
                    var modelo = $(this).val();
                    var cc = $("select[name=modelo] option[value=" + modelo + "]").attr("cilindrada") + "cc";
                    
                    //console.log("cilindrada" + cc);
                    
                    if ( modelo === '')
                        return false;

                    //$("#cc").empty();
                    $("#cc").html(cc);
                    resetaCombo('ano_modelo');
                    resetaCombo('ano_fabricacao');
                    $.getJSON('{base_url}moto/ano/' + modelo, function (data){
                        var option = new Array();
                        $.each(data, function(i, obj){
                            option[i] = document.createElement('option');
                            $( option[i] ).attr( {value : obj.ano} );
                            $( option[i] ).append( obj.ano );
                            $("select[name='ano_fabricacao']").append( option[i] );
                        });
                    });
                });
                
                $("select[name=ano_fabricacao]").change(function(){
                    var modelo = $("select[name=modelo]").val();
                    var valor = $(this).val();
                    var ano = $("select[name=ano_fabricacao] option[value="+valor+"]").html();
                    
                    //                    console.log(modelo);
                    //                    console.log(ano);
                    //                    ano = parseInt(ano) + 1;
                    //                    console.log(ano);
                    
                    resetaCombo('ano_modelo');
                    $.getJSON('{base_url}moto/ano/' + modelo, function (data){
                        var option = new Array();
                        $.each(data, function(i, obj){
                            if (obj.ano == ano || obj.ano == (parseInt(ano)+1)){
                                option[i] = document.createElement('option');
                                $( option[i] ).attr( {value : obj.id} );
                                $( option[i] ).append( obj.ano );
                                $("select[name='ano_modelo']").append( option[i] );
                            }
                        });
                    });
                });
            });
            
            function resetaCombo( el ) {
                $("select[name='"+el+"']").empty();
                var option = document.createElement('option');
                $( option ).attr( {value : ''} );
                $( option ).append( 'Selecionar' );
                $("select[name='"+el+"']").append( option );
            }
            
            jQuery(function($){
                $("#renavam").mask("999999999");
                $("#placa").mask("aaa9999");
                $("#preco").maskMoney();
                $("#quilometragem").maskMoney({precision:0});
            });
        </script>
    </head>

    <body>
        {include_header}
        <div class="wrapper">
            <header class="nav-option">
                <h1 class="breadcrumb-title">Anunciar</h1> 
                <ul class="breadcrumb">
                    <li>Selecionar Plano de Anúncio &gt;</li>
                    <li><strong>Cadastrar Moto </strong>&gt;</li>
                    <li> Identificação &gt;</li>
                    <li> Pagamento</li>
                </ul>
            </header>
            <div class="content">
                <p class="texto-descricao-1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes,
                    nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate
                    eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper
                    nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante,</p> 

                <form class="form1" style="margin-top:45px;" method="POST" action="{link1}">
                    <!--form class="form1" action="{base_url}moto/{anuncio_id}" method="POST"-->
                    <fieldset>
                        <legend class="title-form-1">Anúnciar</legend>   
                        <hr>

                        <label for="nome"><strong>Nome Completo:</strong></label><br>
                        <input type="text" name="nome" id="nome" required  style="width: 350px;" value="{nome}"><br>
                        <span class="input-info">Nome completo do proprietário da moto.</span><br>

                        <label>
                            <input type="radio" value="3" name="moto" checked>Moto Usada</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <label>
                            <input type="radio" value="1" name="moto" disabled>Moto Zero</label><br><br>
                        <label for="renavam"><strong>Renavam:</strong></label><br>
                        <input type="text" name="renavam" id="renavam" required value="{renavam}"><br>
                        <label for="placa"><strong>Placa:</strong></label><br>
                        <input type="text" name="placa" id="placa" required value="{placa}">
                        <input type="submit" class="botao-azul" value="Continuar" style="height: 29px;width: 110px;"><br>
                        <span class="input-info">Apenas o final da placa irá aparecer.</span>

                    </fieldset>
                </form>

                {detalhe}
                <form class="form1" style="margin-top:45px;" method="POST" action="{link2}">
                    <fieldset>
                        <legend class="title-form-1">Detalhes do Veículo</legend>   
                        <hr>

                        <input type="hidden" name="nome" id="nome" value="{nome}">
                        <input type="hidden" name="moto" id="moto" value="{moto}">
                        <input type="hidden" name="renavam" id="renavam" value="{renavam}">
                        <input type="hidden" name="placa" id="placa" value="{placa}">

                        <label for="marcas"><strong>Marca:</strong></label><br>
                        {marcas}<br><br>

                        <label for="modelo"><strong>Modelo:</strong></label><br>
                        {modelos}<br><br>


                        <label for="ano_fabricacao"><strong>Ano Fabricação:</strong></label><br>
                        {anos_fab}<br><br>

                        <label for="ano_modelo"><strong>Ano Modelo:</strong></label><br>
                        {anos_mod}<br><br>


                        <label for="preco"><strong>Preço R$:</strong></label><br>
                        <input type="text" name="preco" id="preco" required  style="width: 350px;" value="{preco}"><br>
                        <span class="input-info">Informe o valor total e não o valor parcelado.</span><br>

                        <br><br>
                        <label name="cilindrada"><strong>Cilindrada:</strong><br><span id="cc"></span></label>

                        <br><br>
                        <label><strong>Estilo:</strong><br> Touring</label>

                        <br><br>
                        <label for="quilometragem"><strong>Quilometragem:</strong></label><br>
                        <input type="text" name="quilometragem" id="quilometragem" required  style="width: 350px;" value="{quilometragem}"><br><br><br>

                        <ul class="caracteristicas-lista marginBottom25px">
                            <li>
                                <label for="marcha"><strong>Número de Marcha</strong></label><br>
                                {marchas}
                            </li>

                            <li>
                                <label for="motor"><strong>Tipos de Motor</strong></label><br>
                                {motor}<br>
                            </li>

                            <li>
                                <label for="refrigeracao"><strong>Tipo de Refrigeração</strong></label><br>
                                {refrigeracao}<br>
                            </li>

                            <li>
                                <label for="partida"><strong>Tipo de Partida</strong></label><br>
                                {partida}<br>
                            </li>

                            <li>
                                <label for="alimentacao"><strong>Tipo de Alimentação</strong></label><br>
                                {alimentacao}
                            </li>

                            <li>
                                <label for="freio"><strong>Freio dianteiro/traseiro</strong></label><br>
                                {freio}<br>
                            </li>

                            <li>
                                <label for="cor_p"><strong>Cor predominante</strong></label><br>
                                {cor_p}<br>
                            </li>

                            <li>
                                <label for="cor_s"><strong>Cor secundária</strong></label><br>
                                {cor_s}<br>
                            </li>
                        </ul>

                        <div style="clear:both;"></div>
                        <legend class="title-form-1" style="margin-top: 50px;">Informações Adicionais</legend>   
                        <hr style="padding: 0; margin: 0;">

                        <ul class="caracteristicas-lista">
                            {adicionais}
                            <li>
                                {adicional}{lbl}
                            </li>
                            {/adicionais}
                        </ul>

                        <div style="clear:both;"></div>
                        <legend class="title-form-1" style="margin-top: 50px;">Informações sobre os opcionais do Veículo</legend>   
                        <hr style="padding: 0; margin: 0;">

                        <ul class="caracteristicas-lista">
                            {opcionais}
                            <li>
                                {opcional}{lbl}
                            </li>
                            {/opcionais}
                        </ul>

                        <div style="clear:both;"></div>
                        <legend class="title-form-1" style="margin-top: 50px;">Observações Gerais do Vendedor</legend>   
                        <hr style="padding: 0; margin: 0;"><br><br>
                        <p>Descreva abaixo informações adicionais pertinentes ao seu veículo. Este é o momento para realçar as qualidades da Moto.</p><br>
                        <textarea name="obs" style="border: 1 px solid rgb(238, 238, 238);width:908px;height:160px;">{obs}</textarea>
                        <input type="submit" class="botao-azul" value="Continuar" style="height: 29px;width: 110px;float:right;margin:35px;"><br>


                    </fieldset>
                </form>
                {/detalhe}



                <div style="clear:both"></div>

            </div>
        </div>
 {include_footer}


    </body>

</html>